import { Button, Collapse, Empty, message } from 'antd'
import SignItem from 'components/SignItem'
import { useAppDispatch, useAppSelector } from 'store/hook'
import { useTranslation } from 'react-i18next'
import styles from './index.module.scss'
import { clearCommonSign } from 'store/slices/signSlice'

export default function CommonSign() {
  const { commonSignList } = useAppSelector(state => state.sign)
  const { t } = useTranslation()
  const dispatch = useAppDispatch()

  // 清空常用符号
  const handleClear = async () => {
    await dispatch(dispatch(clearCommonSign()))
    message.success(`清空成功！`)
  }

  return (
    <div className={styles['common-sign']}>
      <Collapse expandIconPosition='end'>
        <Collapse.Panel header={<h2 className='tac p10 mb0'>{t('commonSign.commonSign')}</h2>} key='1'>
          <b>常用符号说明：</b>
          <ul>
            <li>说明1：最多显示 20 个;</li>
            <li>说明2：采用积分策略对符号进行排序，分值高者排在前;</li>
            <li>说明3：积分策略规则（符号最终分值 = 每次复制操作时的时间戳累加）</li>
          </ul>
        </Collapse.Panel>
      </Collapse>
      <Button hidden={!commonSignList.length} type='primary' block ghost onDoubleClick={handleClear}>
        🗑️ {t('commonSign.clear')}
      </Button>
      {commonSignList.length ? commonSignList.map(v => <SignItem className='sc08' key={v.id} signInfo={v} />) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description='暂无数据' />}
    </div>
  )
}
